import React, {useEffect} from 'react';
import {Form, Input, Select, Modal} from 'antd'
import { FormComponentProps } from 'antd/es/form';

const {Option} = Select

const layout = {
  labelCol: {span: 5},
  wrapperCol: {span: 14},
};

interface CreateFormProps extends FormComponentProps {
}

const AddUpdateForm: React.FC<CreateFormProps> = (props) => {
  const {
    form,
    roles,
    setForm,
    allFields,
    onFieldsDataChange,
    visible,
    showUpdate,
    addOrUpdateUser,
    handleModalVisible
  } = props
  const modalOk = () => {
    form.validateFields((err, value) => {
      if (err) return;
      console.log(value);
    })
    // addOrUpdateUser();
  }

  return (
    <Modal
      title="创建用户"
      okText="确定 "
      cancelText="取消"
      visible={visible}
      onOk={modalOk}
      onCancel={() => {
        handleModalVisible(false)
      }}
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{required: true, message: '请输入用户名!'}]}
      >
        <Input placeholder='请输入用户名'/>
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{required: true, message: '请输入密码!'}]}
      >
        <Input.Password placeholder='请输入密码'/>
      </Form.Item>

      <Form.Item
        label="手机号"
        name="phone"
        rules={[{required: true, message: '请输入手机号!'}]}
      >
        <Input placeholder='请输入手机号'/>
      </Form.Item>

      <Form.Item
        label="邮箱"
        name="email"
        rules={[{required: true, message: '请输入邮箱!'}]}
      >
        <Input placeholder='请输入邮箱'/>
      </Form.Item>

      <Form.Item
        label="角色"
        name="role_id"
        rules={[{required: true, message: '请选择角色!'}]}
      >
        <Select>
          {
            roles.map(role => <Option key={role._id} value={role._id}>{role.name}</Option>)
          }
        </Select>
      </Form.Item>
    </Modal>
  );
}

export default AddUpdateForm;
